/**
 * 校准
 */

import { FC, useState } from "react";
import { MyObject } from "../..";
import { ConfigProvider, Input, message, Modal, Switch } from "antd";
import { useLocation } from "react-router-dom";
import {
  getKshSet,
  getKshSwitchJrLqStatus,
} from "../../api";
import RadarStatus from "../RadarStatus";
import { useWindowFontSize } from "../../../../assets/fun/Antd/configprovider";
import chepai_select_bg from "../../../../assets/image/LaneMonitoring/chepai_select_bg.png";
import { ButtonBox } from "../Jiaozun/style";
import { NeirongCenterBox } from "./style";

const ModuleJiaozun: FC<{
  open: boolean;
  handleCallback: () => void;
  wsData?: MyObject;
  liaocangId: string;
  zhuangtai: {
    jiare: boolean;
    lengque: boolean;
  };
  getZhuangtaiFun: () => Promise<void>;
}> = ({
  open,
  handleCallback,
  wsData,
  liaocangId,
  zhuangtai,
  getZhuangtaiFun,
}) => {
  const [radarStatusShow, setRadarStatusShow] = useState(false); // 雷达状态弹窗
  const [tempcount, setTempcount] = useState("");
  const location = useLocation();

  const handleClick = async (key: string, value: string | boolean) => {
    const params = {
      id: location.state.id,
      key: key,
      value: value,
    };
    const { code, msg } = (await getKshSet(params)) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success(msg);
    } else {
      message.error(msg);
    }
  };










  const handleCancel = () => {
    handleCallback();
  };
  // 加热冷却状态切换
  const handleChangeSwitchJiare = async (type: 0 | 1, checked: boolean) => {
    const { code, msg } = (await getKshSwitchJrLqStatus({
      id: location.state.id,
      type: type,
      status: checked ? 0 : 1,
    })) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success("操作成功");
      getZhuangtaiFun();
    } else {
      message.error(msg);
    }
  };
  return (
    <ConfigProvider
      theme={{
        components: {
          Select: {
            optionSelectedColor: "#5697CC",
            colorText: "#5697CC",
            colorTextPlaceholder: "#5697CC",
            controlHeight: useWindowFontSize(44),
            selectorBg: ` url(${chepai_select_bg}) no-repeat 0 0 / 100% 100%`,
            lineWidth: 0,
          },
          Input: {
            lineWidth: 0,
            controlHeight: useWindowFontSize(44),
            colorText: "#5697CC",
          },
          Spin: {
            dotSize: useWindowFontSize(18),
          },
        },
      }}
    >
      <Modal
        title="设备控制"
        closable={{ "aria-label": "Custom Close Button" }}
        open={open}
        className="jiaozun001"
        getContainer={false}
        onCancel={handleCancel}
        footer={[
          <ButtonBox
            // onMouseDown={() => handleClick("b19", true)}
            // onMouseUp={() => handleClick("b19", false)}
            onClick={() => handleCancel()}
          >
            关闭
          </ButtonBox>,
        ]}
        width={useWindowFontSize(942)}
      >
        <NeirongCenterBox>
          <div className="cb_center_bottom">
            <div className="cb_top">
              <div className="yyz-bot">
                <div className="title">
                  <div className="text-title">液压站温度设定</div>
                </div>
                <div className="yyz-content">
                  <div className="yyz-item-one">
                    <div className="yyz-title">设定温度</div>
                    <div className="yyz-value">
                      <span>{wsData && wsData["s34"] ? wsData["s34"] : 0}</span>
                      <span style={{ fontSize: "1.4rem", marginLeft: ".3rem" }}>
                        ℃
                      </span>
                    </div>
                  </div>
                  <div className="yyz-item">
                    <div className="yyz-title">设定温度(℃)</div>
                    <div className="inputBox">
                      <Input
                        className="inputLeft"
                        placeholder="请输入数字"
                        value={tempcount}
                        onChange={(e) => setTempcount(e.target.value)}
                      />
                      <div
                        className="inputRight"
                        //如果是吨的话 则需要乘1000
                        onClick={() => handleClick("b22", tempcount)}
                      >
                        设定
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="cb_top_yyz_pressure"
                // style={{ transform: "translateY(.2rem)" }}
              >
                <div className="title">液压站数据</div>
                <div className="xinhao_box" style={{ marginTop: "2rem" }}>
                  <div>
                    <span
                      className={`xinhao ${
                        wsData && wsData["s39"] ? "bg-green" : "bg-gray"
                      }`}
                    ></span>
                    <span
                      className={`${
                        wsData && wsData["s39"] ? "text-green" : "text-gray"
                      }`}
                    >
                      运行
                    </span>
                  </div>
                  <div>
                    <span
                      className={`xinhao ${
                        wsData && wsData["s40"] ? "bg-orange" : "bg-gray"
                      }`}
                    ></span>
                    <span
                      className={`${
                        wsData && wsData["s40"] ? "text-orange" : "text-gray"
                      }`}
                    >
                      故障
                    </span>
                  </div>
                  <div>
                    <span
                      className={`xinhao ${
                        wsData && wsData["s41"] ? "bg-green" : "bg-gray"
                      }`}
                    ></span>
                    <span
                      className={`${
                        wsData && wsData["s41"] ? "text-green" : "text-gray"
                      }`}
                    >
                      电源
                    </span>
                  </div>
                </div>
                <div className="btn-box">
                  <div
                    className="bigbtn"
                    onMouseDown={() => handleClick("b29", true)}
                    onMouseUp={() => handleClick("b29", false)}
                  >
                    启动
                  </div>
                  <div
                    className="bigbtn"
                    onMouseDown={() => handleClick("b30", true)}
                    onMouseUp={() => handleClick("b30", false)}
                  >
                    停止
                  </div>
                </div>
              </div>
            </div>
            <div className="cb_bottom">
              <div className="title">液压站温度</div>
              <div className="xinhao_box">
                <div>
                  <span
                    className={`xinhao ${
                      wsData && wsData["s35"] ? "bg-red" : "bg-gray"
                    }`}
                  ></span>
                  <span
                    className={`${
                      wsData && wsData["s35"] ? "text-red" : "text-gray"
                    }`}
                  >
                    加热
                  </span>
                </div>
                <div>
                  <span
                    className={`xinhao ${
                      wsData && wsData["s36"] ? "bg-green" : "bg-gray"
                    }`}
                  ></span>
                  <span
                    className={`${
                      wsData && wsData["s36"] ? "text-green" : "text-gray"
                    }`}
                  >
                    加热到位
                  </span>
                </div>
                <div>
                  <span
                    className={`xinhao ${
                      wsData && wsData["s37"] ? "bg-blue" : "bg-gray"
                    }`}
                  ></span>
                  <span
                    className={`${
                      wsData && wsData["s37"] ? "text-blue" : "text-gray"
                    }`}
                  >
                    冷却
                  </span>
                </div>
                <div>
                  <span
                    className={`xinhao ${
                      wsData && wsData["s38"] ? "bg-green" : "bg-gray"
                    }`}
                  ></span>
                  <span
                    className={`${
                      wsData && wsData["s38"] ? "text-green" : "text-gray"
                    }`}
                  >
                    冷却到位
                  </span>
                </div>
              </div>
              <div className="btn-box">
                <div className="btn_qiehuan">
                  加热模式:
                  <Switch
                    checkedChildren="自动"
                    unCheckedChildren="手动"
                    checked={zhuangtai.jiare}
                    onChange={(checked) => handleChangeSwitchJiare(0, checked)}
                  />
                </div>
                <div
                  className="bigbtn"
                  onMouseDown={() => handleClick("b23", true)}
                  onMouseUp={() => handleClick("b23", false)}
                >
                  加热启动
                </div>
                <div
                  className="bigbtn"
                  onMouseDown={() => handleClick("b24", true)}
                  onMouseUp={() => handleClick("b24", false)}
                >
                  加热停止
                </div>
                <div className="btn_qiehuan">
                  冷却模式:
                  <Switch
                    checkedChildren="自动"
                    unCheckedChildren="手动"
                    checked={zhuangtai.lengque}
                    onChange={(checked) => handleChangeSwitchJiare(1, checked)}
                  />
                </div>
                <div
                  className="bigbtn"
                  onMouseDown={() => handleClick("b25", true)}
                  onMouseUp={() => handleClick("b25", false)}
                >
                  冷却启动
                </div>
                <div
                  className="bigbtn"
                  onMouseDown={() => handleClick("b26", true)}
                  onMouseUp={() => handleClick("b26", false)}
                >
                  冷却停止
                </div>
              </div>
            </div>
          </div>
          <RadarStatus
            open={radarStatusShow}
            setOpen={setRadarStatusShow}
            liaocangId={liaocangId}
          />
        </NeirongCenterBox>
      </Modal>
    </ConfigProvider>
  );
};

export default ModuleJiaozun;
